import React, { useEffect } from "react";
import {
  Form,
  Input,
  InputNumber,
  DatePicker,
  Radio,
  Button,
  Modal,
} from "antd";
import type { LocalStorageDataType } from "@/tool/type";
const { RangePicker } = DatePicker;
const { TextArea } = Input;

type Props = {
  initialValues?: Partial<LocalStorageDataType>;
  onFinish: (values: any) => void;
  onCancel?: () => void;
  submitText?: string;
  loading?: boolean;
};

const CrowdFundingForm: React.FC<Props> = ({
  initialValues,
  onFinish,
  onCancel,
  submitText = "提交",
  loading = false,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue(initialValues);
    } else {
      form.resetFields();
    }
  }, [initialValues, form]);

  // 拦截提交，弹出确认
  const handleSubmit = (values: any) => {
    Modal.confirm({
      title: "确认提交",
      content: "请确认信息填写无误，是否提交？",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        onFinish(values);
        form.resetFields(); // 提交成功后清空输入框
      },
    });
  };

  return (
    <div style={{ maxWidth: 500, margin: "0 auto" }}>
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={initialValues}
        variant={"filled"}
      >
        <Form.Item
          name="title"
          label="标题"
          rules={[{ required: true, message: "请输入标题" }]}
        >
          <Input placeholder="请输入产品标题" />
        </Form.Item>
        <Form.Item
          name="description"
          label="产品介绍"
          rules={[{ required: true, message: "请输入产品介绍" }]}
        >
          <TextArea
            rows={1}
            maxLength={200}
            placeholder="请输入产品介绍内容，200字以内"
          />
        </Form.Item>
        <Form.Item
          name="img_link"
          label="产品图片链接"
          rules={[{ required: true, message: "请输入产品图片链接" }]}
        >
          <TextArea rows={1} placeholder="请输入产品图片链接" />
        </Form.Item>
        <Form.Item
          name="link"
          label="产品详情链接"
          rules={[{ required: true, message: "请输入产品详情链接" }]}
        >
          <TextArea rows={1} placeholder="请输入产品链接" />
        </Form.Item>
        <Form.Item
          name="price"
          label="产品价格"
          rules={[{ required: true, message: "请输入产品价格" }]}
        >
          <InputNumber addonAfter="¥" style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item
          name="target_value"
          label="目标筹集金额"
          rules={[{ required: true, message: "请输入目标筹集金额" }]}
        >
          <InputNumber addonAfter="¥" style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item
          name="time"
          label="众筹时间段"
          rules={[{ required: true, message: "请输入众筹时间段" }]}
        >
          <RangePicker style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item
          name="status"
          label="众筹状态"
          rules={[{ required: true, message: "请输入众筹状态" }]}
          initialValue={1}
        >
          <Radio.Group
            options={[
              { value: 1, label: "进行中" },
              { value: 2, label: "已结束" },
            ]}
          />
        </Form.Item>
        <Form.Item
          name="supported"
          label="已支持人数"
          rules={[{ required: true, message: "请输入已支持人数" }]}
        >
          <InputNumber addonAfter="位" style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading} block>
            {submitText}
          </Button>
          {onCancel && (
            <Button style={{ marginTop: 8 }} onClick={onCancel} block>
              取消
            </Button>
          )}
        </Form.Item>
      </Form>
    </div>
  );
};

export default CrowdFundingForm;
